<template>
  <div class="board-wrap">
    <header class="board-header">
      <div class="title">工单执行进度看板</div>
      <div class="clock">{{ nowText }}</div>
    </header>

    <section class="board-body">
      <el-table
        v-loading="loading"
        :data="rows"
        height="calc(100vh - 160px)"
        stripe
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        :border="false"
        class="dark-table"
      >
        <el-table-column prop="workOrderNo" label="工单编号" min-width="150" />
        <el-table-column prop="status" label="状态" min-width="100" />
        <el-table-column prop="productCode" label="产品编号" min-width="160" />
        <el-table-column prop="productName" label="产品名称" min-width="140" />
        <el-table-column prop="productSpec" label="产品规格" min-width="140" />
        <el-table-column prop="processRoute" label="工艺路线" min-width="160" />
        <el-table-column prop="processCode" label="工序编号" min-width="160" />
        <el-table-column prop="processName" label="工序名称" min-width="120" />
        <el-table-column prop="planQuantity" label="计划数量" min-width="100" />
        <el-table-column prop="qualifiedQuantity" label="合格数量" min-width="100" />
        <el-table-column prop="unqualifiedQuantity" label="不合格数量" min-width="110" />
      </el-table>
    </section>
  </div>
  
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { MES_imesApi } from '@/utils/Interceptors'

type WorkOrderProcess = {
  workOrderProcessId: number
  workOrderNo: string
  status: string
  productCode: string
  productName: string
  productSpec: string
  processRoute: string
  processCode: string
  processName: string
  planQuantity: number
  qualifiedQuantity: number
  unqualifiedQuantity: number
}

const rows = ref<WorkOrderProcess[]>([])
const loading = ref(false)
const nowText = ref('')
let clockTimer: number | undefined

const headerCellStyle = {
  background: 'linear-gradient(180deg, rgba(22,60,120,0.9), rgba(10,30,70,0.9))',
  color: '#A9D6FF',
  fontWeight: 700,
  borderColor: 'rgba(0,153,255,0.3)'
}

const cellStyle = {
  background: 'rgba(8,18,48,0.7)',
  color: '#D6E8FF',
  borderColor: 'rgba(0,153,255,0.1)'
}

const rowStyle = {
  background: 'rgba(8,18,48,0.7)'
}

function formatNow() {
  const d = new Date()
  const pad = (n: number) => n.toString().padStart(2, '0')
  const txt = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
  nowText.value = txt
}

async function fetchData() {
  loading.value = true
  try {
    const res = await MES_imesApi.get('/api/Customer/workorderprocesses')
    // 后端返回 { code, msg, data: [...] }
    rows.value = Array.isArray(res.data?.data) ? res.data.data : []
  } catch (err) {
    console.error('获取进度数据失败', err)
    rows.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  formatNow()
  clockTimer = window.setInterval(formatNow, 1000)
  fetchData()
  // 可选：定时刷新
  // window.setInterval(fetchData, 60_000)
})

onBeforeUnmount(() => {
  if (clockTimer) clearInterval(clockTimer)
})
</script>

<style scoped>
.board-wrap {
  min-height: 100vh;
  background: radial-gradient(1200px 1200px at 10% -10%, rgba(0,153,255,0.15), transparent 60%),
              radial-gradient(1200px 1200px at 90% -10%, rgba(0,200,255,0.15), transparent 60%),
              #06142d;
  padding: 16px 16px 24px;
  box-sizing: border-box;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(8,32,80,0.9), rgba(4,16,40,0.9));
  border: 1px solid rgba(0,153,255,0.35);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,153,255,0.15) inset;
  margin-bottom: 12px;
}

.title {
  font-size: 26px;
  letter-spacing: 2px;
  color: #8ad2ff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(0,153,255,0.6);
}

.clock {
  font-size: 14px;
  color: #9fe0ff;
}

.board-body {
  padding: 12px;
  background: rgba(0, 20, 60, 0.5);
  border: 1px solid rgba(0,153,255,0.25);
  border-radius: 8px;
}

/* Element Plus table dark tuning */
:deep(.el-table.dark-table) {
  --el-table-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-border-color: rgba(0,153,255,0.15);
}

:deep(.el-table.dark-table .el-table__inner-wrapper::before) {
  background-color: rgba(0,153,255,0.15);
}

:deep(.el-table.dark-table .el-table__cell) {
  padding: 10px 8px;
}

:deep(.el-scrollbar__wrap) {
  scrollbar-color: #0af #002;
}
</style>